<template>
  <view class="setting">
    <view class="box">
      <view class="line space-between">
        <view class="title">头像</view>
        <view class="avatar">
			<button
			  type="default"
			  class="space-between buttoncss"
			  open-type="chooseAvatar"
			  @chooseavatar="chooseavatar"
			>
			  <view class="center" style="width: 100%;">
			    <view v-if="userInfo.avatar == ''">
			      <u-icon name="account-fill" size="35" color="#999"></u-icon>
			    </view>
			    <!-- <image v-else :src="userInfo.avatar" class="avatarimg" mode="aspectFill"></image> -->
				<u-image
				  :src="userInfo.avatar"
				  mode="aspectFill"
				  width="92rpx"
				  height="92rpx"
				></u-image>
			  </view>
			</button>
          <!-- <u-image
            :src="userInfo.avatar"
            width="92rpx"
            height="92rpx"
          ></u-image> -->
        </view>
      </view>
      <view class="line space-between">
        <view class="title">昵称</view>
        <view class="name">
			<!-- {{userInfo.nickname}} -->
			<input
            type="nickname"
            v-model="userInfo.nickname"
            placeholder="请输入昵称"
            placeholderStyle="font-size: 30rpx;color: #999"
          
          />
		</view>
      </view>
      <!-- <view class="line space-between">
        <view class="title">手机号</view>
        <view class="name">{{userInfo.phone||'暂无'}}</view>
      </view> -->
      <view class="line space-between">
        <view class="title">ID</view>
        <view class="name">{{userInfo.idcode}}</view>
      </view>
    </view>
	<view @click="submit" class="btn submit">保存</view>
    <view class="btn" @click="exitLogin">退出登录</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
		nickname:'',
		avatar:'',
		userInfo:{}
	};
  },
  onShow() {
  	this.userInfo = uni.getStorageSync("userInfo")||{};
	console.log(this.userInfo,"this.userInfo")
  },
  methods:{
	  exitLogin(){
		  
		 uni.showModal({
		 	title: '提示',
		 	content: '确定退出登录吗？',
		 	success:  (res)=> {
		 		if (res.confirm) {
		 			uni.removeStorageSync("userInfo");
		 			uni.reLaunch({
		 				url:"/pages/auth/login"
		 			})
		 		} else if (res.cancel) {
		 			console.log('用户点击取消');
		 		}
		 	}
		 });
		  
		 
		  console.log(111)
	  },
	  submit(){
		  if(this.userInfo.nickname == '') return this.$u.toast('请输入昵称')
		  
		  this.$api.post({
		      url: "/ebapi/user_api/edit_user",
		      data: {
				  nickname:this.userInfo.nickname,
				  avatar:this.userInfo.avatar
			  },
		      success: (res) => {
		  		this.$u.toast('保存成功')
				this.$store.commit('setUserInfo')
				setTimeout(()=>{
					this.$uniApi.cback()
				},1000)
		  	},
		   })
		 
	  },
	  // 选择用户头像， 重点， 得调用下上传图片接口
	  chooseavatar(e) {
	    console.log(e, "chooseavatar选择头像");
	    this.$uniApi.uploadFile(e.detail.avatarUrl).then((res) => {
	      console.log(res, "上传图片地址",this.$utils.isBaseUrl(res));
	      this.userInfo.avatar = this.$utils.isBaseUrl(res);
	    });
	  },
	  // 输入、获取昵称
	  onNickName(e) {
	    console.log(e, "获取的昵称");
	    this.nickname = e.detail.value;
	  },
  }
};
</script>

<style lang="scss">
page {
  padding: 0;
}

.setting {
  padding-top: 20rpx;

  .box {
    background-color: #ffffff;

    .line {
      font-size: $uni-text-size-title;
      padding: 36rpx 60rpx;
		.buttoncss {
		  background-color: #fff;
		  border-radius: 0px;
		  border: 0rpx solid transparent;
		  color: #999;
		  font-size: 30rpx; padding: 0;
		  width: 80rpx; height: 80rpx; border-radius: 50%; text-align: center;
		  .avatarimg{
			  width: 100%; height: 100%;
		  }
		}
		.nick {
		  padding-bottom: 30rpx;
		  border-bottom: 2rpx solid #f2f2f2;
		  display: flex;
		  align-items: center;
		  padding-left: 14px;
		  padding-right: 14px;
		
		  .n1 {
		    font-size: 28rpx;
		    margin-right: 30rpx;
		  }
		}
		.name{
			text-align: right;
		}
    }
  }

  .btn {
    width: 610rpx;
    margin: 0 72rpx;
    padding: 20rpx 0;
    font-size: 30rpx;
    font-weight: bold;
    text-align: center;
    color: #ffffff;
    background-color: #fed23e;
    border-radius: 50rpx;
    position: absolute;
    bottom: 40rpx;
  }
  .submit{
  	bottom: 150rpx;
	    background: #2354E3;
	    color: #fff;
  }
}
</style>
